<template>
  <div>
    <div class="node" v-has="{action: 'voice:task:log:list', effect: 'move'}">
      <div :class="[$style.search_box, $style.topSelect]">
        <SearchInput
          placeholder="任务编号"
          label="任务编号"
          style="margin-right:20px"
          :value="searchs.tid"
          :onChange="(val) => changeSearch('tid',val)"
          :onBlur="getQueryData"
        />
        <SearchInput
          placeholder="电话号码"
          label="电话号码"
          style="margin-right:20px"
          :value="searchs.phone"
          :onChange="(val) => changeSearch('phone',val)"
          :onBlur="getQueryData"
        />
        <SearchInput
          placeholder="车牌号"
          label="车牌号"
          style="margin-right:20px"
          :value="searchs.plate"
          :onChange="(val) => changeSearch('plate',val)"
          :onBlur="getQueryData"
        />
        <div :class="$style.selectBox">
          <label>状态：</label>
          <el-select
            style="width:160px"
            v-model="searchs.state"
            clearable
            @change="getQueryData"
            placeholder="请选择"
          >
            <el-option label="呼叫中" :value="1"></el-option>
            <el-option label="呼叫失败" :value="2"></el-option>
            <el-option label="呼叫成功" :value="3"></el-option>
          </el-select>
        </div>
        <div :class="$style.selectBox" >
          <label>时间：</label>
          <el-date-picker
            v-model="searchs.appointmentTime"
            type="datetimerange"
            @change="getQueryData()"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          
            value-format="timestamp"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </div>
        <div :class="$style.searchBox1" style="margin-left: 20px">
          <el-button type="primary" icon="el-icon-search" @click="getQueryData">查询</el-button>
        </div>
      </div>
      <Panel title="语音通知日志" useBack>
        <!-- <div slot='ext' :class="$style.examine">
          <el-button type="success" icon="el-icon-plus" @click="()=>editStore()">新增</el-button>
      </div> -->
      <TableEncapsulation
        slot="body"
        :tableConfig="ismOrpc ? tableConfig: appTableConfig"
        :tableData="tableData"
      >
    
      <template slot="operation" slot-scope="operation">
          <el-button
              type="text"
              @click="()=>editStore(operation.row.id)"
            >编辑</el-button>
            <el-button
              type="text"
              @click="()=>exemption(operation.row.id)"
            >刷新key</el-button>
            <el-button
              type="text"
              @click="()=>violence(operation.row.id)"
            >暴力减免</el-button>
          <el-button
              type="text"
              @click="()=>remove(operation.row.id)"
            >删除</el-button>
          </template>
          <TablePager
            slot="pager"
            v-if="pager.use"
            :size="pager.size"
            :pageChange="pageChange"
            :show-total="pager.showTotal"
            :total="pager.total"
            :current="pager.current"
          >
            <span class="demonstration">GO></span>
          </TablePager>
      </TableEncapsulation>
      </Panel>
   </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'voice:task:log:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import { objectFilter } from "@/tools/array";
import { dateFormat } from "@/tools/time";

export default {
  name: "userVoiceLog",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput,
  },
  data() {
    return {
      searchs:{
        component: 'voiceLog',
        state:'',
        appointmentTime:[],
        plate: '',
        tid:'',
        phone: ''
      },
      modalData:{},
      tableData: [],
      editId:'',
      pager: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      name: '',
      operation: true,
      modalData:{},
    
    };
  },
  created() {
    if(this.$route.query.id){
      this.searchs.tid = this.$route.query.id
    }else{
      let now = new Date().getTime() + 3600 * 1000 * 24
      let year = new Date(now).getFullYear()
      let month = new Date(now).getMonth() 
      let day = new Date(now).getDate()
      let last = new Date().getTime() - 3600 * 1000 * 24 * 6
      let lastYear =  new Date(last).getFullYear() 
      let LastMonth = new Date(last).getMonth() 
      let lastDay = new Date(last).getDate()
      this.searchs.appointmentTime = [ new Date(lastYear, LastMonth, lastDay, 0, 0,0), new Date(year, month, day, 0, 0,0)]
    }
    
    
    this.getQueryData();
    this.searchsFnc()
  },
  computed: {
    ismOrpc() {
			    return this.$store.getters.ismOrpc;
			},
    appTableConfig () {
      return {
        selection: false,
        columnConfig: [
         {
            label: "名字",
            type: "text",
            prop: "name",
            align: "center"
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:180
          }
        ].filter(Boolean)
        }
    },
    tableConfig () {
      return {
        selection: true,
        columnConfig: [
       
          {
            label: "订单号",
            type: "text",
            prop: "sn",
            align: "center"
          },
          {
            label: "语音通知编号",
            type: "text",
            prop: "tid",
            align: "center"
          },
          {
            label: "手机号",
            type: "text",
            prop: "phone",
            align: "center"
          },
          {
            label: "状态",
            type: "other",
            prop: "state",
            align: "center",
            fnc: val => val==1? '通知中' : val==2? '成功' : '失败',
            class: val => val == 1 ? 'denger-tag': val ==2 ? 'agree': 'wait'
          },
          {
            label: "通知内容",
            type: "text",
            prop: "body",
            align: "center"
          },
          {
            label: "通知时间",
            type: "text",
            prop: "callTime",
            align: "center"
          },
          {
            label: "错误信息",
            type: "text",
            prop: "msg",
            align: "center"
          },
        //   this.operation && {
        //     type: "operation",
        //     align: "center",
        //     label: "操作",
        //     width:180
        //   }
        ].filter(Boolean)
        }
    },
  },
  methods: {
      searchsFnc (){
      let searchs = this.$store.getters.searchs
      if(searchs &&searchs.component == 'voiceLog'){
        this.searchs = searchs
      }
      let pager = this.$store.getters.pager
      if(pager &&pager.component == 'voiceLog'){
        this.pager = pager
      }
    },
    async getQueryData() {
       let endTime = this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[1], "yyyy-MM-dd HH:mm:ss")) : ''
      let beginTime = this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[0],"yyyy-MM-dd HH:mm:ss")) : ''
      let state =  this.searchs.state
      let tid = this.searchs.tid
      let phone = this.searchs.phone
      let page = this.pager.current
      let plate = this.searchs.plate
      let search = objectFilter({ state, page, plate, tid, endTime, beginTime, phone })
      const res = await request({
        url: "/voice/task/log",
        method: "POST",
        data: search
      });
      this.tableData = res.page.list
      this.pager.total = res.page.totalCount
      this.pager.current = res.page.currPage
    },
    pageChange(val) {
      this.pager.current = val;
      this.getQueryData();
    },
    pageChange1(val) {
      this.pager1.current = val;
      this.getQuery();
    },
    changeSearch(key, val) {
      this.searchs[key] = val;
      this.pager.current = 1;
    },
    charge(rowData){

      let data = {
        price:0,api:rowData.id,detail:''
      }
      this.modalData = data
      this.visible = true
      
    },


    exemption(id){
       this.$confirm('确认刷新吗', '操作确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        let res = await request({
          url: "/reverse/parking/refresh/"+id,
          method: 'GET',
        })
        if(res.code !==0) return
        this.$message({
          type: 'success',
          message: '刷新成功',
          duration: 10000
        })
        // this.$message.success('刷新成功')
        if(this.tableData.length===1 && this.pager.current>1)
          this.$set(this.pager,'current', this.pager.current-1)
        this.getQueryData()
      })
    },
    
  }
}
</script>
<style lang='scss' module>
.examine{
    display: flex;
    align-items: center;
    :global{
        div{
            color: #fff;
            padding: 10px;
            margin: 0 10px;
            border-radius: 2px;
            font-size: 14px;
            cursor: pointer;
            min-width: 60px;
            text-align: center;
        }
        .adopt{
                background: #409EFF;
        }
    }
}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  :global {
    .el-input {
      width: 150px;
    }
    .el-select {
      .el-input {
        width: 90px;
      }
    }
    .el-input__icon {
      line-height: 27px;
    }
    .el-range-separator{
      line-height: 26px;
    }
  }
}

.topSelect {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}
</style>